// echart图表组件
<template>
  <div :id="id" :style="chartStyle"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    props: {
        option: {
            type: Object,
            required: true
        },
        id: {
            type: String,
            required: true
        },
        width: {
            type: String,
            default: '600px'
        },
        height: {
            type: String,
            default: '300px'
        }
    },
    data () {
        return {
            chart: null 
        }
        
    },
    computed: {
        chartStyle(){
           return {
                width: this.width,
                height: this.height
           }
        }
    },
    mounted(){
        setTimeout(()=>{
            this.chart = echarts.init(document.getElementById(this.id));
            this.chart.setOption(this.option);
        },1000)
    },
    beforeDestroy(){
        this.chart = null;
    }
}
</script>
